<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XmlStore Demo</title>

<style type="text/css">
@import "script/dojo-1.4.3/dojo/resources/dojo.css";
@import "script/dojo-1.4.3/dijit/themes/tundra/tundra.css";

@import "script/dojo-1.4.3/dojox/layout/resources/FloatingPane.css";
@import "script/dojo-1.4.3/dojox/layout/resources/ResizeHandle.css";

body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#debugPanel pre {
    font-family: "Lucida Console", "Courier New", Courier, monospace;
}

div.container {
    border: 0px solid green;
    margin: 10px;
}
</style>

<script type="text/javascript">
var djConfig = {
    isDebug: true,
    parseOnLoad: true,
    locale: "en",
    extraLocale: ["en"]
};
</script>
<script type="text/javascript" src="script/dojo-1.4.3/dojo/dojo.js"></script>
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.date.locale");
    dojo.require("dojo.parser");

    dojo.require("dijit.ColorPalette");
    dojo.require("dijit.Dialog");
    dojo.require("dijit.form.CheckBox");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.DropDownButton");
    dojo.require("dijit.form.FilteringSelect");
    dojo.require("dijit.form.NumberSpinner");
    dojo.require("dijit.form.RadioButton");
    dojo.require("dijit.form.SimpleTextarea");
    dojo.require("dijit.form.Textarea");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.Menu");
    dojo.require("dijit.TitlePane");
    dojo.require("dijit.TooltipDialog");

    dojo.require("dojox.html.entities");
    dojo.require("dojox.layout.FloatingPane");
    dojo.require("dojox.layout.ResizeHandle");
    dojo.require("dojox.widget.Standby");

    dojo.require("dojox.data.XmlStore");
</script>
<script type="text/javascript" src="script/utils.js"></script>
<script type="text/javascript">
function debug(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);
    console.debug(msg);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML = msg;
}

function append(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML += "\n" + msg;
}

function show(id) {
    demo.utils.show(id);
}

function hide(id) {
    demo.utils.hide(id);
}
</script>
<style type="text/css">
@import "css/rounded-button.css";
@import "css/rounded-corners.css";

body {
    padding: 10px;
}

</style>
<script type="text/javascript">
function hasChildren(item, store) {
    var children = store.getValues(item, "childNodes");
    return children.length > 0;
}

function getItemValue(item, attribute, store) {
    var propertyItems = store.getValues(item, "childNodes");
    var matchedPropertyItems = dojo.filter(propertyItems, function(propertyItem) {
        var propertyName = store.getValue(propertyItem, "@property");
        return (propertyName === attribute);
    });

    var propertyItem = null;
    if (matchedPropertyItems.length > 0)
        propertyItem = matchedPropertyItems[0];

    var valueItem = store.getValue(propertyItem, "childNodes");
    while (hasChildren(valueItem, store)) {
        valueItem = store.getValue(valueItem, "childNodes");
    }

    var value = store.getValue(valueItem, "text()");
    return value;
}

function writeToTextarea(str, textarea) {
    var text = textarea.attr("value");
    textarea.attr("value", text + "\n" + str);
}

//////////////////////////////
dojo.addOnLoad(function() {
    debug("loading");

    var url = "./data/filesList.xml";

    var store = new dojox.data.XmlStore({
        url: url,
        attributeMap: {
            "object.class": "@class",
            "void.method": "@method",
            "void.property": "@property"
        },
        rootItem: "object"
    });

    var textarea = dijit.byId("textarea");

    var gotItems = function(items, request){
        textarea.attr("value", "");
        debug(items.length);

        var lines = [];
        dojo.forEach(items, function(item) {
            var fileName = getItemValue(item, "fileName", store);
            lines.push(fileName);
            var fileUrl = getItemValue(item, "fileUrl", store);
            lines.push(fileUrl);
        });

        writeToTextarea(lines.join("\n"), textarea);
    };

    // attribute: name of nested element
    // @attribute: attribute
    var request = store.fetch({
        query: {
            "class": "cz.vity.freerapid.model.DownloadFile"
        },
        onComplete: gotItems
    });
});

//////////////////////////////

</script>
</head>
<body class="tundra">

  <div id="main" class="container">

    <div id="titlePanel" dojoType="dijit.TitlePane" title="Panel" style="">
      <div id="resizablePanel" style="position:relative; padding: 10px; border:1px solid black;">

        <!-- Content -->
        <div class="content">
            <div id="title" style="font-weight: bold;"></div>
            <!-- grid toolbar -->
            <div id="gridToolbarContainer"></div>
            <!-- grid -->
            <textarea id="textarea" name="textarea" dojoType="dijit.form.SimpleTextarea" rows="30" style="width: 800px;">The links will be in this place.</textarea>
            <div id="metadata"></div>
            <div id="footer" style="text-align: center; font-weight: bold; font-size: smaller; color: #880000;"></div>
        </div>

        <!-- Resize Handle -->
        <div id="resizeHandle" dojoType="dojox.layout.ResizeHandle" targetId="resizablePanel"></div>
      </div>
    </div>

    <!-- Button Panel -->
    <div dojoType="dojo.dnd.Moveable">
      <div id="buttonPanel" dojoType="dijit.TitlePane" title="Button Panel" style="">
        <!-- Button -->
        <button dojoType="dijit.form.Button" onClick="dijit.byId('dialog').show();">Button</button>

        <!-- DropDown Button -->
        <button dojoType="dijit.form.DropDownButton" title="Click to show TooltipDialog">
          <span>DropDownButton with TooltipDialog</span>
          <!-- TooltipDialog -->
          <div dojoType="dijit.TooltipDialog">
            <label for="name">Name:</label>
            <input dojoType="dijit.form.TextBox" id="name" name="name" />
            <br/>
            <button dojoType="dijit.form.Button" type="submit">Save</button>
          </div>
        </button>

        <button dojoType="dijit.form.DropDownButton" title="Click to show Menu">
          <span>DropDownButton with Menu</span>
          <!-- Menu -->
          <div dojoType="dijit.Menu" id="menu" style="display: none;">
            <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut" onClick="alert('Cut!')">Cut</div>
            <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy" onClick="alert('Copy!')">Copy</div>
            <div dojoType="dijit.MenuSeparator"></div>
            <div dojoType="dijit.PopupMenuItem">
              <span>Popup ColorPalette</span>
              <div dojoType="dijit.ColorPalette"></div>
            </div>
          </div>
        </button>
      </div>
    </div>
  </div>

  <!-- Debug Panel -->
  <div id="debugPanel" dojoType="dojox.layout.FloatingPane" title="Console" resizable="true" dockable="true" style="position: absolute; bottom: 20px; right: 20px; width: 500px; height: 150px;">
    <pre id="debugPanelContent"></pre>
  </div>

  <!-- Popup Dialog -->
  <div dojoType="dijit.Dialog" id="dialog" title="Dialog" style="display: none;">
    <div id="okButton" dojoType="dijit.form.Button" onClick="alert('OK!');">OK</div>
    <div id="cancelButton" dojoType="dijit.form.Button" onClick="dijit.byId('dialog').hide();">Cancel</div>
  </div>
</body>
</html>
